<template>
    <div class="store">
        <div style="height: 60px; display: flex; align-items: center">
            <div class="btns" style="justify-content: left">
                <el-button @click="back">返回</el-button>
            </div>
            <div class="btns">
                <!-- <el-button>查找</el-button> -->
                <el-button @click="add">新建文件夹</el-button>
                <el-button @click="upload">上传文件</el-button>
                <el-button @click="downloadf">下载</el-button>
                <!-- <el-button>重命名</el-button> -->
                <el-button @click="deletef">删除</el-button>
            </div>
        </div>
        <div style="height: calc(100% - 100px); width: 100%; display: grid; grid-template-columns: repeat(auto-fill, 320px); grid-template-rows: repeat(auto-fill, 60px); gap: 20px">
            <div
                :class="select.length && item.name === select[select.length - 1].name ? 'active' : ''"
                @dblclick="dblclick(item)"
                @click="click(item)"
                v-for="item in fileList"
                :key="item.name"
                style="display: flex; background: #f5f6f8; border: 1px solid #e1e3e5; border-radius: 2px"
            >
                <img style="width: 50px; height: 50px; margin: 5px" :src="require(`@/assets/files/${item.type}.png`)" />
                <div class="context">
                    <div>{{ item.name }}</div>
                    <div>{{ item.size }}</div>
                    <div>{{ item.last_modified }}</div>
                </div>
            </div>
        </div>
        <zy-form ref="addform" :dialog="addDialog" @add="addf" />
        <el-dialog title="文件上传" :visible.sync="showUpload">
            <el-upload ref="upload" :data="{ url }" :action="'/api/store/upload'" :file-list="uploadList" :limit="1" :auto-upload="false" :on-success="handSuccess" :on-change="handleChange" :on-progress="handError">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">文件上传</el-button>
                <!-- <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div> -->
            </el-upload>
        </el-dialog>
    </div>
</template>

<script>
import { requestApi, downloadFile } from '@/requset/api'
import zyForm from '@/components/common/zyForm.vue'

export default {
    data() {
        return {
            addDialog: {
                labelWidth: '100px',
                config: [
                    {
                        name: 'name',
                        type: 'input',
                        placeholder: '请输入文件夹名称',
                        label: '文件夹名称',
                        required: true,
                    },
                ],
                form: {
                    name: '',
                },
                title: '新增文件夹',
            },
            uploadList: [],
            fileList: [],
            showUpload: false,
            src: '',
            select: [],
            url: '',
        }
    },
    components: {
        zyForm,
    },
    methods: {
        handSuccess(res) {
            this.$refs.upload.clearFiles()
            this.uploadList = []

            if (res.code === 0) {
                this.$message.success(res.msg)
                this.showUpload = false
                this.getlist()
            } else {
                this.$message.error((res.msg ? res.msg : '') + '导入失败')
            }
        },
        handleChange(file, fileList) {
            this.uploadList = fileList
        },
        handError(res) {
            this.loadingAll.close()
        },
        submitUpload() {
            if (this.uploadList.length === 0) {
                this.$message.error('导入文件不能为空')
                return
            }
            if (this.uploadList.length > 1) {
                this.$message.error('一次只能导入一个文件')
                return
            }
            this.$refs.upload.submit()
            this.loadingAll = Loading.service({
                target: 'body',
                background: 'rgb(0,0,0,.4)',
            })
        },
        add() {
            this.$refs.addform.openDialog('add')
        },
        upload() {
            this.showUpload = true
        },
        close() {
            this.$refs.uploadform.closeDialog()
        },
        downloadf() {
            downloadFile(this.select[this.select.length - 1].name, this.url)
        },
        deletef() {
            this.$confirm('确定删除此文件/文件夹？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    requestApi('post', 'store/delete', { name: this.select[this.select.length - 1].name, type: this.select[this.select.length - 1].type, url: this.url }).then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg,
                            })
                            this.getlist()
                            this.select = []
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.data.msg,
                            })
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        addf() {
            requestApi('post', 'store/add', { url: this.url, name: this.addDialog.form.name }).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: res.data.msg,
                    })
                    this.addDialog.form.name = ''
                    this.$refs.addform.closeDialog()
                    this.getlist()
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.msg,
                    })
                }
            })
        },
        uploadf() {
            requestApi('post', 'store/add', { url: this.url }).then((res) => {})
        },
        click(item) {
            if (this.select.length) {
                this.select.splice(this.select.length - 1, 1, item)
            } else {
                this.select.push(item)
            }
        },
        dblclick(item) {
            if (item.type === 'folder') {
                this.url = this.url + item.name + '/'
                this.select.push(item)
                this.getlist()
            }
        },
        back() {
            if (this.url === '') {
                this.$router.push('/index/home')
            } else {
                this.select.pop()
                this.url = this.url.slice(0, this.url.lastIndexOf(this.select[this.select.length - 1].name))
                this.getlist()
            }
        },
        getlist() {
            requestApi('post', 'store/getlist', { url: this.url }).then((res) => {
                this.fileList = res.data.data
                    .sort((a, b) => {
                        return a.last_modified - b.last_modified
                    })
                    .sort((a, b) => {
                        if (a.type === 'folder') return -1
                        if (b.type === 'folder') return 1
                        return 0
                    })
                    .map((item) => {
                        item.last_modified = this.dayjs(item.last_modified * 1000).format('YYYY-MM-DD HH:mm:ss')
                        item.type = item.type === 'folder' ? 'folder' : item.file_type.split('.')[1]
                        item.size = item.size < 1000000 ? (item.size / 1024).toFixed(2) + 'KB' : (item.size / 1024 / 1024).toFixed(2) + 'MB'
                        return item
                    })
            })
        },
    },
    mounted() {
        this.getlist()
    },
}
</script>

<style lang="less" scoped>
.store {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 10px;
    .btns {
        flex: 1;
        display: flex;
        justify-content: right;
        .el-button {
            width: 80px;
            margin-right: 20px;
            height: 100%;
            background-color: #707070;
            border-color: #707070;
            color: white;
            display: flex;
            justify-content: center !important;
        }
    }
    .active {
        box-shadow: 0 15px 30px rgb(0 0 0 / 10%) !important;
        border: 1px solid #1cf4ff !important;
        box-shadow: 0 0 1rem rgba(28, 244, 255, 0.5) !important;
    }
    .context {
        flex: 1;
        display: flex;
        flex-direction: column;
        color: #141e31;
        justify-content: space-around;
        font-size: 14px;
        margin: 5px 10px;
        white-space: nowrap;
        overflow: hidden;
        div {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis !important;
        }
    }
}
</style>
